<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>List Demo | Onsen UI</title>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/onsenui.js"></script>

</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">List</div>
    </ons-toolbar>

    <br>

    <ons-list-title>Normal List</ons-list-title>
    <ons-list>
      <ons-list-item>One</ons-list-item>
      <ons-list-item>Two</ons-list-item>
      <ons-list-item>Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>Tappable List</ons-list-title>
    <ons-list>
      <ons-list-item tappable>One</ons-list-item>
      <ons-list-item tappable>
        <div class="left"><ons-checkbox></ons-checkbox><ons-switch></ons-switch></div>
        <div class="center">Two -<span prevent-tap>- Not here</span><ons-button>Not here</ons-button></div>
      </ons-list-item>
      <ons-list-item tappable>Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>Expandable List Items</ons-list-title>
    <ons-list>
      <ons-list-item expandable>
        Tap to expand
        <div class="expandable-content">
          I have been expanded!
        </div>
      </ons-list-item>
      <ons-list-item expandable tappable>
        Tap to expand (tappable)
        <div class="expandable-content">
          I have also been expanded!
        </div>
      </ons-list-item>
      <ons-list-item expandable>
        Expandable with custom icon
        <div class="right">...</div>
        <div class="expandable-content">
          How do you like the icon?
        </div>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Chevron</ons-list-title>
    <ons-list>
      <ons-list-item modifier="chevron" tappable>One</ons-list-item>
      <ons-list-item modifier="chevron" tappable>Two</ons-list-item>
      <ons-list-item modifier="chevron" tappable>Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>Long divider</ons-list-title>
    <ons-list>
      <ons-list-item modifier="longdivider">One</ons-list-item>
      <ons-list-item modifier="longdivider">Two</ons-list-item>
      <ons-list-item modifier="longdivider">Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>No divider</ons-list-title>
    <ons-list>
      <ons-list-item modifier="nodivider">One</ons-list-item>
      <ons-list-item modifier="nodivider">Two</ons-list-item>
      <ons-list-item modifier="nodivider">Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Switch</ons-list-title>
    <ons-list>
      <ons-list-item tappable>
        <label for="switch-1" class="center">
          Title
        </label>
        <label class="right">
          <ons-switch input-id="switch-1"></ons-switch>
        </label>
      </ons-list-item>
      <ons-list-item modifier="chevron" tappable>
        <label for="switch-2" class="center">
          Title
        </label>
        <label class="right">
          <ons-switch input-id="switch-2"></ons-switch>
        </label>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Radio Buttons</ons-list-title>
    <ons-list>
      <ons-list-item tappable>
        <label class="left">
          <ons-radio input-id="radio-1" name="b"></ons-radio>
        </label>
        <label for="radio-1" class="center">
          Radio button
        </label>
      </ons-list-item>

      <ons-list-item modifier="chevron" tappable>
        <label class="left">
          <ons-radio input-id="radio-2" name="b"></ons-radio>
        </label>
        <label for="radio-2" class="center">
          Radio button
        </label>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Checkboxes</ons-list-title>
    <ons-list>
      <ons-list-item tappable>
        <label class="left">
          <ons-checkbox input-id="checkbox-1"></ons-checkbox>
        </label>
        <label for="checkbox-1" class="center">
          Checkbox
        </label>
      </ons-list-item>

      <ons-list-item modifier="chevron" tappable>
        <label class="left">
          <ons-checkbox input-id="checkbox-2"></ons-checkbox>
        </label>
        <label for="checkbox-2" class="center">
          Checkbox
        </label>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Labels</ons-list-title>
    <ons-list>
      <ons-list-item>
        <div class="center">
          Title
        </div>
        <div class="right">
          <div class="list-item__label">Label</div>
        </div>
      </ons-list-item>

      <ons-list-item modifier="chevron" tappable>
        <div class="center">
          Title
        </div>
        <div class="right">
          <div class="list-item__label">Label</div>
        </div>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Subtitles</ons-list-title>
    <ons-list>
      <ons-list-item>
        <div class="center">
          <div class="list-item__title">Title</div>
          <div class="list-item__subtitle">Subtitle</div>
        </div>
      </ons-list-item>

      <ons-list-item tappable>
        <label class="left">
          <ons-checkbox input-id="checkbox-3"></ons-checkbox>
        </label>
        <label for="checkbox-3" class="center">
          <div class="list-item__title">Title</div>
          <div class="list-item__subtitle">Subtitle</div>
        </label>
      </ons-list-item>

      <ons-list-item modifier="chevron" tappable>
        <label class="left">
          <ons-checkbox input-id="checkbox-4"></ons-checkbox>
        </label>
        <label for="checkbox-4" class="center">
          <div class="list-item__title">Title</div>
          <div class="list-item__subtitle">Subtitle</div>
        </label>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with Thumbnails</ons-list-title>
    <ons-list>

      <ons-list-item>
        <div class="left">
          <img class="list-item__thumbnail" src="">
        </div>

        <div class="center">
          <div class="list-item__title">Title</div>
          <div class="list-item__subtitle">Subtitle</div>
        </div>
      </ons-list-item>

      <ons-list-item modifier="chevron" tappable>
        <div class="left">
          <img class="list-item__thumbnail" src="">
        </div>

        <div class="center">
          <div class="list-item__title">Title</div>
          <div class="list-item__subtitle">Subtitle</div>
        </div>
      </ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>List with icons</ons-list-title>
    <ons-list>

      <ons-list-item>
        <div class="center">
          Title
        </div>
        <div class="right">
          <ons-icon class="list-item__icon" icon="ion-ios-information"></ons-icon>
        </div>
      </ons-list-item>

      <ons-list-item>
        <div class="center">
          Title
        </div>
        <div class="right">
          <ons-icon class="list-item__icon" icon="ion-ios-information"></ons-icon>
        </div>
      </ons-list-item>

    </ons-list>

    <br>

    <ons-list-title>List Category Header</ons-list-title>
    <ons-list>
      <ons-list-header>Category</ons-list-header>
      <ons-list-item>One</ons-list-item>
      <ons-list-header>Category</ons-list-header>
      <ons-list-item>Two</ons-list-item>
      <ons-list-item>Three</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>"noborder" modifier</ons-list-title>
    <ons-list modifier="noborder">
      <ons-list-item modifier="chevron" tappable>With chevron</ons-list-item>
      <ons-list-item>Without chevron</ons-list-item>
    </ons-list>

    <br>

    <ons-list-title>"nodivider" modifier</ons-list-title>
    <ons-list>
      <ons-list-item modifier="chevron nodivider" tappable>With chevron</ons-list-item>
      <ons-list-item modifier="nodivider">Without chevron</ons-list-item>
    </ons-list>

    <br>
  </ons-page>
</body>
</html>
